<template>
    <div class="component-user-comment">
        <img :src="data.src" class="img">
        <div class="data">
            <div class="name">{{data.name}}</div>
            <div class="date">{{data.date}}</div>
            <div class="content">{{data.content}}</div>
        </div>

    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-user-comment{
        display: flex;
        padding: .8rem 1.5rem .8rem 0;
        margin-left: 1.5rem;

        &+.component-user-comment{
            border-top: 1px solid @color-line-gray;
        }

        .img{
            width: 3.4rem;
            height: 3.4rem;
            margin-right: 1.1rem;
            margin-top: .3rem;
        }
        .data{
            flex: 1;
            .name{
                font-size: 1.5rem;
                line-height: 2.1rem;
            }
            .date{
                font-size: 1.1rem;
                line-height: 1.5rem;
            }
            .content{
                font-size: 1.5rem;
                line-height: 2.1rem;
            }
        }
    }
</style>

<script>
    export default {
        props: ['data']
    }
</script>